<template>
    <div class="box-list-container">
        <el-card class="table-card">
            <div class="header-container">
                <el-page-header content="产品列表" icon="" title="产品管理" />
                <div class="search-container">
                    <el-input
                        v-model="searchKeyword"
                        placeholder="请输入产品名称关键词"
                        clearable
                        @input="handleSearch"
                    >
                        <template #suffix>
                            <el-icon><Search /></el-icon>
                        </template>
                    </el-input>
                </div>
            </div>

            <el-table :data="paginatedData" style="width: 100%" border>
                <!-- 标题 -->
                <el-table-column prop="title" label="产品名" min-width="180" show-overflow-tooltip />
                <!-- 分类 -->
                <el-table-column label="产品类别" width="120" align="center">
                    <template #default="scope">
                        {{ categoryFormat(scope.row.category) }}
                    </template>
                </el-table-column>
                <!-- 更新时间 -->
                <el-table-column label="发布时间" width="180" align="center">
                    <template #default="scope">
                        {{ formatTime.getTime(scope.row.editTime) }}
                    </template>
                </el-table-column>
                <!-- 是否发布 -->
                <el-table-column label="是否发布" width="100" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isPublish" :active-value="1" :inactive-value="0"
                            @change="handleSwitchChange(scope.row)" />
                    </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" width="180" align="center" fixed="right">
                    <template #default="scope">
                        <el-button circle :icon="View" type="success" @click="handlePreview(scope.row)"></el-button>
                        <el-button circle :icon="Edit" @click="handleEdit(scope.row)"></el-button>

                        <el-popconfirm title="你确定要删除吗？" confirm-button-text="确定" cancel-button-text="取消"
                            @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button circle :icon="Delete" type="danger"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页组件 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="currentPage"
                    :page-size="pageSize"
                    :total="filteredData.length"
                    layout="total, prev, pager, next, jumper"
                    @current-change="handleCurrentChange"
                    background
                    small
                />
            </div>
        </el-card>
        <!-- 预览新闻展示框 -->
        <el-dialog v-model="dialogVisible" title="预览产品" width="50%">
            <div>
                <h2>{{ previewData.title }}</h2>
                <div style="font-size: 12px;color:gray;">{{ formatTime.getTime(previewData.editTime) }}</div>
                <el-divider>
                    <el-icon>
                        <star-filled />
                    </el-icon>
                </el-divider>

                <div v-html="previewData.content" class="htmlcontent"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import axios from 'axios';
import formatTime from '@/util/formatTime'
import { View, Edit, Delete, StarFilled, Search } from '@element-plus/icons-vue'
// import router from '@/router';
import { useRouter } from 'vue-router';

const router = useRouter()
const tableData = ref([])
const previewData = ref({})
const dialogVisible = ref(false)
const searchKeyword = ref('');

// 搜索功能 - 过滤数据
const filteredData = computed(() => {
    if (!searchKeyword.value) {
        return tableData.value;
    }
    return tableData.value.filter(item => 
        item.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
});

// 分页相关
const currentPage = ref(1);
const pageSize = 6; // 每页显示6条

// 当前页的数据
const paginatedData = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize;
    return filteredData.value.slice(startIndex, startIndex + pageSize);
});

// 搜索处理函数
const handleSearch = () => {
    // 搜索时重置到第一页
    currentPage.value = 1;
};

// 分页变化处理函数
const handleCurrentChange = (val) => {
    currentPage.value = val;
};

onMounted(() => {
    getTableData()
})

const getTableData = async () => {
    const res = await axios.get(`/adminapi/box/list`)
    // console.log(res.data.data)
    tableData.value = res.data.data
}

// 格式化分类信息
const categoryFormat = (category) => {
    const arr = ["A级", "B级", "C级"]
    return arr[category - 1]
}

// 开关回调
const handleSwitchChange = async (item) => {
    // console.log(item)
    await axios.put(`/adminapi/box/publish`, {
        _id: item._id,
        isPublish: item.isPublish
    })

    await getTableData()
}

// 预览回调
const handlePreview = (data) => {
    // console.log(data)
    previewData.value = data
    dialogVisible.value = true
}

// 删除回调
const handleDelete = async (item) => {
    // console.log(item)
    await axios.delete(`/adminapi/box/list/${item._id}`)
    await getTableData()
}

// 编辑回调
const handleEdit = (item) => {
    // 跳转到/news/manage/editnews/:id

    router.push(`/box-manage/editbox/${item._id}`)
}


</script>

<!-- 样式 -->
<style lang="scss" scoped>
.box-list-container {
    padding: 0;
    height: 100%;
    position: relative;
}

.table-card {
    height: 100%;
    margin: 0;
    padding: 0;
    
    :deep(.el-card__body) {
        height: 100%;
        padding: 15px;
        display: flex;
        flex-direction: column;
    }
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.search-container {
    width: 300px;
}

.el-table {
    margin-top: 20px;
    flex: 1;
    margin-bottom: 70px; /* 为分页器预留空间 */
}

.pagination-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

:deep(.htmlcontent) {
    img {
        max-width: 100%;
    }
}
</style>